<!DOCTYPE html>
<html>
<head>
<!--
	Copyright (c) 2015-2018 Jean-Marc VIGLINO, 
	released under CeCILL-B (french BSD like) licence: http://www.cecill.info/
-->
	<title>ol-ext: Geoportail Loader</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="icon" type="image/png" href="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/IGN_logo_2012.svg/218px-IGN_logo_2012.svg.png" />

	<meta name="description" content="Geoportail WFS" />
	<meta name="keywords" content="ol, openlayers, layer, source, geoportail, WFS" />

  <meta name="msapplication-tap-highlight" content="no" />
  <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1" />

	<!-- jQuery -->
	<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
  <!-- FontAwesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

	<!-- Openlayers -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@latest/ol.css" />
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/ol@latest/dist/ol.js"></script>
	<script src="/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL,Object.assign"></script>
	
	<!-- ol-ext -->
  <link rel="stylesheet" href="../../dist/ol-ext.css" />
  <script type="text/javascript" src="../../dist/ol-ext.js"></script>
  <!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
  <script src="https://unpkg.com/elm-pep"></script>
  <script type="text/javascript" src="../../dist/extra/FontAwesomeDef.js"></script>

  <!-- JSTS -->
  <script type="text/javascript" src="https://unpkg.com/jsts@1.6.1/dist/jsts.min.js"></script>
  
  <!-- filesaver-js -->
	<script type="text/javascript" src="https://cdn.rawgit.com/eligrey/FileSaver.js/aa9f4e0e/FileSaver.min.js"></script>

  <link rel="stylesheet" href="./geoportail.loader.css" />
  
</head>
<body >
<!--
  <a href="https://github.com/Viglino/ol-ext" class="icss-github-corner"><i></i></a>
-->
  <i class="wait fa fa-spinner fa-pulse"></i>

	<div id="info" class="dialog" onclick="$('#info').addClass('hidden');">
    <img src="https://upload.wikimedia.org/wikipedia/commons/a/a0/IGN_logo_2012.svg" />
    <p>
      Outil de chargement de données IGN à travers les flux Géoportail. 
      <ol>
        <li>Choisissez la couche</li>
        <li>Sélectionner la zone à charger</li>
        <li>Charger les données</li>
        <li>Enregistrer...</li>
      </ol>
      Cliquez sur le carroyage pour sélectionner un carreau à charger. 
      <kbd>Ctrl</kbd>+clic+drag pour sélectionner une zone à charger.
      <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+clic+drag pour désélectionner une zone à charger.
      Glisser-déposer un fichier (GeoJSON, KML, etc.) à ajouter à la zone de chargement...
    </p>
    <p>
      Les bases de données de l'IGN sont diffusées selon les termes de la 
      <a href="https://geoservices.ign.fr/documentation/diffusion/telechargement-donnees-libres.html" target="_new">
        licence ouverte Etalab 2.0
      </a>
    </p>
    <div>
      <span>
        <img src="https://upload.wikimedia.org/wikipedia/commons/1/18/Logo-licence-ouverte2.svg" />
        <span>
          Licence Ouverte
          <hr/>Open Licence
        </span>
      </span>
    </div>
  </div>

	<!-- DIV pour la carte -->
  <div id="map"></div>
	<div class="options">
    <div>
      <label>Couche :</label>
      <select id="typename" onchange="setWFS(this.value)">
        <option class='standard' value="BDTOPO_V3:troncon_de_route">route</option>
        <option class='standard' value="BDTOPO_V3:batiment">batiments</option>
        <option class='standard' value="CADASTRALPARCELS.PARCELLAIRE_EXPRESS:parcelle">parcelle</option>
        <option class='hydro' value="BDTOPO_V3:cours_d_eau">cours d'eau</option>
      </select>
      <button onclick="showDialog('tiles')"><i class="fa fa-hand-o-up"></i></button>
      <button onclick="loadTiles()"><i class="fa fa-upload"></i> charger</button>
      <button onclick="save()"><i class="fa fa-download"></i> enregistrer</button>
      <i class="fa fa-info-circle" onclick="showDialog('info')"></i>
    </div>
  </div>
  
  <div id="tiles" class="dialog hidden">
    <h2>Dalles de chargement</h2>
    <i class="fa fa-close" onclick="$('#tiles').addClass('hidden');"></i>
    <p>
      <button onclick="reset()">
        <i class="fa fa-refresh"></i> Réinitialiser la zone
      </button>
      <i>Retour à zéro : les données seront perdues, la zone de chargement réinitialisée.</i>
    </p>
    <!--p>
      <button onclick="selScreen()">
        <i class="fa fa-clone"></i> Zone visible
      </button>
      <i>Sélectionner la zone visible pour un chargement.</i>
    </p-->
    <p>
      <button onclick="communeDialog.show()">
        <i class="fa fa-upload"></i> Charger une commune
      </button>
      <i>Charger une commune avec son numéro INSEE comme zone de chargement ou glissez-déposez un fichier sur la carte.</i>
    </p>
    <p>
      <button onclick="circularZone($(this).next().val())">
        <i class="fa fa-circle-o"></i> Zone circulaire...
      </button>
      <input type="number" step="" value="3" min="0" style="width:5em;" /> km
      <i>Créer une zone de chargement circulaire centrée sur la carte.</i>
    </p>
    <p>
      <button onclick="buffer()">
        <i class="fa fa-eercast"></i> Buffer
      </button> <input id="buffer" type="number" min=0 value=0 style="width: 5em;" />
      <i>Ajouter un buffer à la zone de chargement</i>
    </p>
    <p>
      <button onclick="tileCommune();">
        <i class="fa fa-clone"></i> Dans la zone de chargement
      </button>
      <i>Charger les dalles intersectant la zone de chargement</i>
    </p>
  </div>

  <div id="save" class="dialog hidden">
    <h2>Enregistrer</h2>
    <form>
      <ul>
        <li>
          Format: <select>
            <option value="geojson">GeoJSON</option>
            <option value="kml">KML</option>
            <option value="esrijson">EsriJSON</option>
          </select>
        </li><li>
          <label><input type="checkbox" class="select" /><span> seulement la sélection</span></label>
        </li><li>
          <label><input type="checkbox" class="clip" /><span> intersecte la zone de chargement</span></label>
        </li><li>
          <label><input type="checkbox" class="null" checked="checked" /><span> supprimer les attributs null</span></label>
        </li><li style="text-align: right;">
          <button type="button" onclick="showOptions()"><i class="fa fa-list"></i> options...</button>
        </li>
      </ul>
      <div class="buttons">
        <button type="submit"><i class="fa fa-map-o"></i> enregistrer</button>
        <button class="commune" type="button" onclick="saveCommune();"><i class="fa fa-download"></i> commune</button>
        <button type="reset" onclick="$('#save').addClass('hidden')">annuler</button>
      </div>
    </form>
  </div>
  
  <div id="options" class="dialog hidden">
    <h2>Options</h2>
    <i class="fa fa-close" onclick="$('#options').addClass('hidden');"></i>
    <label><input type="checkbox" class="filter" /> Filtrage géométrique: </label><input class="geom" type="number" value=0 step=".5" min="0" /> m<br/>
    <label><input type="checkbox" class="limit" /> Limiter les attributs:</label>
    <div class="buttons">
      <button class="valid">OK</button>
      <button onclick="$('#options').addClass('hidden')">Annuler</button>
    </div>
    <ul class='disabled'></ul>
    <div class="buttons">
      <button class="valid">OK</button>
      <button onclick="$('#options').addClass('hidden')">Annuler</button>
    </div>
  </div>

  <div id="alert" class="dialog hidden">
    <div>
      <h2>Options</h2>
      <i class="fa fa-close" onclick="$('#alert').addClass('hidden');"></i>
      <div class='content'></div>
      <div class="buttons">
        <button onclick="$('#alert').addClass('hidden')">OK</button>
      </div>
    </div>
  </div>

  <div class="info">
    xxx objets
  </div>

	<script type="text/javascript" src="./geoportail.loader.js"></script>

</body>
</html>